<template>
  <div>
    <!-- 面包屑区域 -->
    <bread-detail :category="infoobj.categories" :name="infoobj.name"></bread-detail>
    <!-- 商品基本信息区域 -->
    <div class="goods-info">
      <goods-image :imgarr="infoobj.mainPictures"></goods-image>
      <div>
        <goods-name :name="infoobj.name" :desc="infoobj.desc" :price="skuobj.price || infoobj.price"
          :oldPrice="infoobj.oldPrice"></goods-name>
        <Goodssku :specs="infoobj.specs" :skuskus="infoobj.skus" @send="getSkuData" :infoobj="infoobj" :skuobjj="skuobj"></Goodssku>
      </div>
    </div>

    <!-- 同类商品推荐区域 -->
    <Goodstuijina :relevantlist="relevantlist"></Goodstuijina>
    <!-- 商品详情区域 -->
    <Goodsxiatabs @go2="go2" :details="infoobj.details" :hotlist1="hotlist1" :hotlist2="hotlist2"
      :evaluatelist="evelist" :evaluatelist2="eveerlist"></Goodsxiatabs>
  </div>
</template>

<script>
import { getcategoods, getSame, getgoodsapi, } from "@/utils/api/detail";
import Goodssku from "./goodssku.vue";
import BreadDetail from "./BreadDetail.vue";
import GoodsImage from "./GoodsImage.vue";
import GoodsName from "./GoodsName.vue";
import Goodstuijina from "./Goodstuijina.vue";
import Goodsxiatabs from "./Goodsxiatabs.vue";
import axios from "axios";
import qs from "querystring";
export default {
  components: { BreadDetail, GoodsImage, GoodsName, Goodstuijina, Goodsxiatabs, Goodssku },
  data() {
    return {
      infoobj: {},
      relevantlist: [],
      hotlist1: [],
      hotlist2: [],
      evelist: [],
      eveerlist: [],
      skuobj: {}
    };
  },
  methods: {
    getSkuData(obj) {
      this.skuobj = obj
    },
    async getgoodslist(id) {
      let res = await getcategoods(id);
      // console.log(res);
      this.infoobj = res.result;
    },

    async xuan1(id) {
      var arr = {
        id: id,
        limit: 16,
      };
      let data = await getSame(arr);
      // console.log(data);
      this.relevantlist = data.result;
    },
    async getxianglist(id) {
      var arr = {
        id: id,
        limit: 3,
        type: 1,
      };
      let res = await getgoodsapi(arr);
      // console.log(res);
      this.hotlist1 = res.result;

      var arr1 = {
        id: id,
        limit: 3,
        type: 2,
      };
      let res1 = await getgoodsapi(arr1);
      this.hotlist2 = res1.result;
    },
    async getpinlei(id) {
      let res = await axios.get(`https://mock.boxuegu.com/mock/1175/goods/${id}/evaluate`)
      // console.log(res);
      this.evelist = res.data.result
      // console.log(this.evelist);
    },
    async getpinleigoods(id) {
      let { data } = await axios.get(`https://mock.boxuegu.com/mock/1175/goods/${id}/evaluate/page?${qs.stringify(this.query)}`);
      this.eveerlist = data.result;
    },
    go2() {
      this.getpinlei(this.$route.query.id);
      this.getpinleigoods(this.$route.query.id);
    },
  },
  mounted() {
    this.getxianglist(this.$route.query.id)
    this.getgoodslist(this.$route.query.id);
    this.xuan1(this.$route.query.id)
    // this.getpinlei(this.$route.query.id)
  },
};
</script>

<style lang="scss" scoped>
.goods-info {
  width: 1240px;
  margin: auto;
  display: flex;
}
</style>